<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
    
        <title>溯源信息查询（Bootstrap）</title>
        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>

        <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css">


        <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    
        <style>
            .bs-docs-home
            {
            background-color: #D0D0D0;
            /* background-image: url(line.jpg); */
            }
    </style>

</head>

<body class="bs-docs-home">
    <div class="container theme-showcase">
        <h1 style=" line-height:2em;"> </h1><br />
        <div class="row">
            <div class="col-sm-3"></div>
        <div class="col-sm-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"><strong>溯源信息查询</strong></h3>
                </div>
                <div class="panel-body">
                   <div class="alert alert-danger alert-dismissable">
                       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                       <strong>注意!</strong> 确保商品信息已经上链</div>
              
                       <form role="form" name="form1">

                           <div class="form-group">
                               <label for="IDCard">请输入商品ID</label>
                               <div class="input-group">
                                   <input type="text" class="form-control" id="IDCard" name="IDCard" placeholder="商品ID" >
                                   <span class="input-group-btn">
                                       <button class="btn btn-default" type="button" id="queryall"  >查询</button>
                                   </span>
                               </div>
                           </div>
        
                           <div class="form-group">

                               <label for="Subject">请输入您要查询的参与方</label>
                               <div class="input-group">
                                   <input type="text" class="form-control" id="Subject" name="Subject" placeholder="空白意味着查询所有的参与方信息" >
                                   <div class="input-group-btn">
                                       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">参与方名称 <span class="caret"></span></button>
                                       <ul class="dropdown-menu pull-right">
                                           <li><a href="#" onClick="$('#Subject').val('原料方');">原料方</a></li>
                                           <li><a href="#" onClick="$('#Subject').val('生产商');">生产商</a></li>
                                           <li><a href="#" onClick="$('#Subject').val('经销商');">经销商</a></li>
                                           <li><a href="#" onClick="$('#Subject').val('零售商');">零售商</a></li>
                                           <li><a href="#" onClick="$('#Subject').val('顾客');">顾客</a></li>
                                       </ul>
                                   </div>
                               </div>
                           </div>
                       </form>
                    </div>

                     
                       <div class="alert alert-danger alert-dismissable">
                           <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                           <strong>注意!</strong> 若查询未果，请核对商品ID，再次查询
                       </div> 
            
                       <div class="table-responsive">
                           <table  border="0" cellspacing="0" cellpadding="0" class="table">
                               <tr class=" label-primary">
                                   <th scope="col" width="50%" ><span style="color:white">参与方</span></th>
                                   <th scope="col"><span style="color:white">查询结果</span></th>
                               </tr>
                               <tr class="active">
                                   <td width="50%">原料方</td>
                                   <td id="Meterial"></td>
                               </tr>
                               <tr class="success">
                                   <td>生产商</td>
                                   <td id="Produce"></td>
                               </tr>
                               <tr class="active">
                                   <td>经销商</td>
                                   <td id="Trades"></td>
                               </tr>
                               <tr class="success">
                                   <td>零售商</td>
                                   <td id="Retails"></td>
                               </tr> 
                           </table>
                       </div>         
                   </div>
               </div>
           </div>
     
           <div class="col-sm-3"></div>
        </div>
    </div>
    <script>
       
    </script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/web3.min.js"></script>
    <script src="js/truffle-contract.js"></script>
    <script src="js/app.js"></script> 
    
</body>
</html>